<template>
  <div class="gamedata">
    <Top></Top>
    <div class="con1">
      <Title></Title>
      <ul class="herolist-nav">
        <li :class="{current:index===setcurrent}" v-for="(item,index) in getdata1" :key="item.id">
          <router-link :to="item.path" class="herolist-tab">{{item.name}}</router-link>
        </li>
      </ul>
      <div class="herolist-box">
        <div class="herolist-type clearfix">
          <ul class="clearfix type-left">
            <li>综合</li>
            <li>定位</li>
          </ul>
          <ul class="type-ms clearfix">
            <li v-for="(getheroms,index) in getheroms" :key="getheroms.id" @click="gethero1(index)">
              <span class="ms-wai">
                <i class="i"></i>
              </span>
              <label>{{getheroms.name}}</label>
            </li>
          </ul>
          <ul class="type-ms clearfix">
            <li
              v-for="(getheroms2,index) in getheroms2"
              :key="getheroms2.id"
              @click="gethero2(index)"
            >
              <span class="ms-wai">
                <i class="i" :class="{current:index===setcurrent}"></i>
              </span>
              <label>{{getheroms2.name}}</label>
            </li>
          </ul>
          <div class="type-search">
            <input type="text" placeholder="请输入你想要搜索的英雄" id="search" @input="search" />
            <i class="el-icon-search" @click="search"></i>
          </div>
        </div>
        <div class="herolist-conents">
          <ul class="herolist">
            <li v-for=" herolist in herolist" :key="herolist.id">
              <p @click="getkin(herolist.ename)">
                <img :src="herolist.img" alt style="width:91px; height:91px" />
                {{herolist.cname}}
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <Buttom></Buttom>
  </div>
</template>
<script>
import Title from '../../components/title'
import Top from '../../components/Top'
import Buttom from '../../components/Buttom'
export default {
  data: () => ({
    herolist: [],
    setcurrent: 0,
    getheroms2: [
      {
        id: 0,
        name: '全部'
      },
      {
        id: 1,
        name: '坦克'
      },
      {
        id: 2,
        name: '战士'
      },
      {
        id: 3,
        name: '刺客'
      },
      {
        id: 4,
        name: '法师'
      },
      {
        id: 5,
        name: '射手'
      },
      {
        id: 6,
        name: '辅助'
      }
    ],
    getheroms: [
      {
        id: 0,
        name: '本周免费'
      },
      {
        id: 1,
        name: '新手推荐'
      }
    ],
    getdata1: [
      {
        id: 0,
        name: '英雄',
        path: 'gamedata'
      },
      {
        id: 1,
        name: '局内道具',
        path: 'item'
      },
      {
        id: 2,
        name: '召唤师技能',
        path: 'summoner'
      }
    ]
  }),
  created () {
    this.getdata()
  },
  methods: {
    async getdata () {
      const data = await this.$axios.get('http://localhost:8080/getdata')
      this.herolist = data.data
    },
    async gethero1 (num) {
      document.querySelector('#search').value = ''
      var OUi = document.querySelectorAll('.type-ms')[0]
      var OiAll = OUi.querySelectorAll('.i')
      var Oi = OUi.querySelectorAll('.i')[num]
      var OUi2 = document.querySelectorAll('.type-ms')[1]
      var OiAll2 = OUi2.querySelectorAll('.i')

      OiAll2.forEach(el => {
        el.style.background = 'none'
      })
      OiAll.forEach(el => {
        el.style.background = 'none'
      })
      Oi.style.background = 'blue'
      const data = await this.$axios.get('http://localhost:8080/getdata')
      var list = data.data
      if (num === 0) {
        this.herolist = list.slice(1, 8)
      } else if (num === 1) {
        this.herolist = list.slice(15, 19)
      }
    },
    async gethero2 (num) {
      var newarr = []
      document.querySelector('#search').value = ''
      var OUi1 = document.querySelectorAll('.type-ms')[0]
      var OUi2 = document.querySelectorAll('.type-ms')[1]
      var OiAll1 = OUi1.querySelectorAll('.i')
      var OiAll2 = OUi2.querySelectorAll('.i')
      var Oi2 = OUi2.querySelectorAll('.i')[num]
      OiAll1.forEach(el => {
        el.style.background = 'none'
      })
      OiAll2.forEach(el => {
        el.style.background = 'none'
      })
      Oi2.style.background = 'blue'
      const data = await this.$axios.get('http://localhost:8080/getdata')
      var list = data.data
      var heronum = 0

      if (num === 1) {
        heronum = 3
      }
      if (num === 2) {
        heronum = 1
      }
      if (num === 3) {
        heronum = 4
      }
      if (num === 4) {
        heronum = 2
      }
      if (num === 5) {
        heronum = 5
      }
      if (num === 6) {
        heronum = 6
      }
      for (var i = 1; i < list.length; i++) {
        if (list[i].hero_type === heronum) {
          newarr.push(list[i])
        } else if (list[i].hero_type2 === heronum) {
          newarr.push(list[i])
        }
      }
      this.herolist = newarr
      if (num === 0) {
        this.herolist = list
      }
    },
    async search () {
      var newarr = []
      var OUi2 = document.querySelectorAll('.type-ms')[1]
      var OiAll2 = OUi2.querySelectorAll('.i')
      OiAll2.forEach(el => {
        el.style.background = 'none'
      })
      OiAll2[0].style.background = 'blue'
      var Search = document.querySelector('#search').value
      const data = await this.$axios.get('http://localhost:8080/getdata')
      var list = data.data
      for (var i = 0; i < list.length; i++) {
        if (list[i].cname.indexOf(Search) !== -1) {
          newarr.push(list[i])
        }
      }
      this.herolist = newarr
    },
    getkin (id) {
      this.$router.push('/skin/' + id)
    }
  },
  components: {
    Title,
    Top,
    Buttom
  }
}
</script>
<style lang="less" scoped>
.gamedata {
  .clearfix:after {
    content: ' ';
    visibility: hidden;
    display: block;
    clear: both;
  }
  background: url(https://game.gtimg.cn/images/yxzj/web201605/page/ny_con_bg.jpg) no-repeat;
  background-size: cover;
  .con1 {
    margin: 0px;
    padding: 0px;
    padding-top: 40px;
    width: 1200px;
    margin: 0 auto;
    .herolist-nav {
      margin: 0px;
      padding: 0px;
      margin-top: 20px;
      height: 32px;
      font-size: 16px;
      li {
        float: left;
        text-align: center;
        width: 33.333333%;
        border-bottom: 3px solid #d4d4d4;
        list-style: none;
        a {
          color: #4b4b4b;
          text-decoration: none;
        }
      }
      .current {
        border-bottom: 3px solid #3589dd;
        color: #3589dd;
        a {
          color: #3589dd;
          text-decoration: none;
        }
      }
    }
    .herolist-box {
      margin: 0;
      padding: 0;
      margin-bottom: 50px;
      padding: 35px 28px;
      border: 2px solid #e8e8e8;
      border-top: 0;
      position: relative;
      .herolist-type {
        margin: 0;
        padding: 0;
        background-color: #efefef;
        border-radius: 5px;
        color: #686869;
        .type-left {
          margin: 0;
          padding: 0;
          float: left;
          width: 80px;
          height: 106px;
          text-align: center;
          background-color: #2c88e2;
          color: #fff;
          border-radius: 5px 0 0 5px;
          li {
            margin: 0;
            padding: 0;
            display: block;
            height: 52px;
            line-height: 52px;
            font-size: 16px;
          }
        }
        .type-ms {
          margin: 0;
          padding: 0;
          float: left;
          width: 900px;
          padding: 16px 0;
          height: 20px;
          line-height: 21px;
          li {
            margin: 0;
            padding: 0;
            float: left;
            padding-left: 15px;
            min-width: 90px;
            font-size: 14px;
            cursor: pointer;
            list-style: none;
            .ms-wai {
              float: left;
              width: 18px;
              height: 18px;
              margin-right: 7px;
              border: 1px solid #b3b3b3;
              border-radius: 50px;
              position: relative;
              .i {
                display: inline-block;
                position: absolute;
                top: 3px;
                left: 3px;
                width: 12px;
                height: 12px;
                border-radius: 50px;
              }
              .current {
                background-color: blue;
              }
            }
            label {
              float: left;
              cursor: pointer;
              line-height: 19px;
            }
          }
        }
        .type-search {
          position: absolute;
          top: 86px;
          right: 60px;
          border: 1px solid #d2d2d2;
          padding: 10px;
          height: 22px;
          width: 220px;
          #search {
            float: left;
            border: none;
            width: 80%;
            height: 22px;
            line-height: 20px;
            font-size: 12px;
            color: #747475;
            background: none;
            outline: none;
            background-color: rgba(0, 0, 0, 0); // 透明背景
          }
        }
      }
      .herolist-conents {
        margin-top: 40px;
        .herolist {
          margin: 0;
          padding: 0;
          margin-right: -50px;
          overflow: hidden;
          li {
            float: left;
            width: 87px;
            margin-bottom: 34px;
            margin-right: 30px;
            list-style: none;
            p {
              display: block;
              width: 100%;
              text-align: center;
              text-decoration: none;
              color: #000;
              img {
                width: 83px;
                height: 83px;
                border: 2px solid #258df2;
                border-radius: 10px 0 10px 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>
